<template>
	<view>
		<view style="height: 100rpx;"></view>
		<view class="Tabbar flex">
			<view class="tabkist" :class="tabtag==index?'active':''" v-for="(item,index) in tabkist" :key="index" @tap="Jump(item.url,index)">
					<view class="flex" style="width: 100%;justify-content: center;">
						<image v-if="tabtag==index" :src="tabtag==index?item.selectedIconPath:item.iconPath" mode=""></image>
						<image v-else :src="tabtag==index?item.selectedIconPath:item.iconPath" mode=""></image>
					</view>
					<view class="barText">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"Tabber",
		props:{
			tabtag: {
				type: [Number],
				default: 0
			},
		},
		data() {
			return {
				tabkist:[
					{
						"url": "/SupplyEnd/taber/home",
						"text": "首页",
						"iconPath": "/SupplyEnd/static/home_bottom11.png",
						"selectedIconPath": "/SupplyEnd/static/home_bottom12.png"
					},
					{
						"url": "/SupplyEnd/good/list",
						"text": "商品",
						"iconPath": "/SupplyEnd/static/home_bottom13.png",
						"selectedIconPath": "/SupplyEnd/static/home_bottom14.png"
					},
					{
						"url": "/SupplyEnd/good/index",
						"text": "订单",
						"iconPath": "/SupplyEnd/static/home_bottom15.png",
						"selectedIconPath": "/SupplyEnd/static/home_bottom16.png"
					}
					// {
					// 	"url": "/SupplyEnd/taber/my",
					// 	"text": "我的",
					// 	"iconPath": "/SupplyEnd/static/home_bottom17.png",
					// 	"selectedIconPath": "/SupplyEnd/static/home_bottom17.png"
					// },
				]
			}
		},
		methods: {
			Jump(url,index){
				console.log(this.tabtag==index)
				if(this.tabtag!=index){
						uni.reLaunch({
							url:url
						})
				}
			}
		}
	}
</script>

<style>
	.active .BarText{
		color: #FF3355;
	}
	.tabkist image{
		width: 55rpx;
		height: 55rpx;
	}
	.tabkist{
		width: 50%;
	}
	.barText{
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.Tabbar{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		z-index: 9;
		background-color: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>